import { CompassOutlined, MessageOutlined, UserOutlined, UserSwitchOutlined } from "@ant-design/icons";
import { ReactNode, useContext } from "react";
import { NavLink } from "react-router-dom";
import { MemberContext } from "../../contexts/Member";

export default function Footer() {
    const {friends, rooms, applies} = useContext(MemberContext);
    let unread = 0;
    let applyNumber = 0;
    [...(friends || []), ...(rooms || [])].map((item) => unread += (item?.unread || 0));
    (applies || []).map((item) => applyNumber += (item.status === 1) ? 1 : 0);

    return <>
        <div className="bottom-0 border-t h-16 w-screen bg-white flex items-center justify-around">
            <Single path='/' element='微信' icon={<MessageOutlined />} dot={!!unread} />
            <Single path='/friend' element='通讯录' icon={<UserSwitchOutlined />} dot={!!applyNumber} />
            <Single path='/finder' element='发现' icon={<CompassOutlined />} />
            <Single path='/mine' element='我' icon={<UserOutlined />} />
        </div>
    </>;
}

function Single({path, element, icon, dot = false}: {
    path: string,
    element: ReactNode,
    icon: ReactNode,
    dot?: boolean,
}) {
    let pathname = '';
    if(typeof window !== 'undefined') {
        pathname = window.location.pathname;
    }
    return <NavLink className={`
            relative flex flex-col items-center text-gray-600 justify-center
            ${pathname === path ? 'text-green-500' : ''}
        `}
        to={path}
    >
        <div className="text-2xl">{icon}</div>
        <span className="text-xs font-bold">{element}</span>
        {
            dot
                ? <div className="h-[6px] w-[6px] absolute top-0 right-0 rounded-full bg-red-500"></div>
                : <></>
        }
    </NavLink>
}
